<template>
	<view class="content" v-show="isShow">
		<view class="uni-flex-top">
			<view class="uni-flex-lefttime">
				剩余时间：<uni-countdown :show-day="false" :second="currTime" @timeup="timeup" class="countdown"/>
			</view>
			<view class="uni-flex-total">
				<view class="uni-flex-totbtn" >
					<image src="/static/btn_add_up.png" class="tjIcon" lazy-load mode="widthFix" @tap="answerTotal"/>
				</view>
			</view>
		</view>
		
		<!-- <view class="uni-flex-note" >
			<view class="uni-flex-list" v-if="!isEmpty(list)">
				{{list.title}}
			</view>
		</view> -->
		<!--主体-->
		<view class="uni-flex-main uni-top-20" v-show="isShow">
			<exam-type :list="list" @doNext="doNext" @doUp="doUp" @isChoose="isChoose" :chooseType="chooseType"></exam-type>
		</view>
		<!--主体-->
		<view class="bot-sure" v-if="showSureBtn">
			<button type="warn" @click="toggle('center')"  class="dosure" :disabled="disabled" :loading="loading">交卷</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
		</view>
		<!--popup-->
		<uni-popup id="popup" ref="popup" :type='type' :animation="true" @change="change" class="popupTop">
			<view class="popup-content">
				<icon type="cancel" size="26" color="#000000" class="cancel" @tap="close"/>
				<view class="popup-main" v-if="currTime>0">
					<view class="info">距离考试结束的时间还剩<text class="showTime">{{popupContent|formatDate}}</text> <text class="topics" v-if="topics>0">本次您还有{{topics}}题尚未作答</text>，您确定交卷吗？</view>
					<view class="tip">(可前往“答题统计”，查看或修改已做题目)</view>
				</view>
				<view class="popup-main" v-if="currTime<1">
					1小时考试时间已到，系统已自动帮您交卷。
				</view>
				
				<view class="showBtn">
					<button type="default" @click="showTotal" size="mini" class="anwstotal" >答题统计</button>
					<button type="default" @click="doSure" size="mini" class="sureit" >确定交卷</button>
				</view>
				
			</view>
		</uni-popup>
		<!--popup-->
	</view>
	
</template>

<script>
	const util = require('@/common/util.js')
	const request = require('@/common/request.js')
	import {mapState} from 'vuex'
	import examType from "./exam/exam-type.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components:{
			examType,
			uniPopup
		},
		data() {
			return {
				title: '集团制度考试',
				examTitle: '一、单选题，共20题，每题1分',
				examType: 1,    //1：单选题；2：多选题；3：判断题。
				isShow: false,
				authKey: null,
				itemObj:null,
				disabled:false,
				loading:false,
				showSureBtn:false,
				lanternPaperAnswer:'',
				chooseType:0,
				type:'center',
				popupContent:'',
				topics:0, //未完成的题目
				list:{}         //数据
			}
		},
		filters: {
			formatDate: function (value) {
				return util.formatSeconds(value)
			}
		},
		computed: {
			...mapState(['base_url','vote_url','currTime','examState'])
		},
		onLoad(option) {
			this.authKey = !util.isEmpty(option.authKey) ? option.authKey : "";
			if(!this.examState){
				uni.redirectTo({
					url:'/pages/index/index?authKey=' + this.authKey
				})
			}
			//this.second = this.currTime
			this.loadData()
		},
		methods: {
			async loadData() {
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_startpascal",params: {
						authKey: that.authKey
					}
				}
				//console.log(JSON.stringify(param))
				uni.showLoading({title: '准备答题......'})
				request.baseRequest(opts, param).then((res) => {
					if(!util.isEmpty(res)){
						console.log(JSON.stringify(res))
						that.itemObj = res
						that.list = that.itemObj.pascal
						that.$store.commit('setCurrTime',that.itemObj.time)
						console.log(this.currTime)
						if(that.itemObj.canhand){
							that.showSureBtn = true
						}
						//是否初始化有选中数据
						if(that.itemObj.pascal.lantern.status==0 && !util.isEmpty(that.itemObj.pascal)){
							//未选
						}else if(that.itemObj.pascal.lantern.status==1 && !util.isEmpty(that.itemObj.pascal)){
							//已选
							that.chooseType = 1
						}
						that.lanternPaperAnswer = JSON.stringify(that.list.lantern.lanternPaperAnswer)
					}
					that.isShow = true
					uni.hideLoading()
				},(error) => {
						console.log(JSON.stringify(error))
						that.isShow = true
						uni.hideLoading()
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
			},
			timeup(){
				//结束
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_handpaper",params: {
						authKey: that.authKey,
						auto:1
					}
				}
				that.loading = true
				that.disabled = true
				that.chooseType=-1
				uni.showLoading({title: '时间到...'})
				request.baseRequest(opts, param).then((ress) => {
					console.log(JSON.stringify(ress))
					if(!util.isEmpty(ress)){
						uni.showModal({
							title: '提示',
							content: ress.message,
							confirmColor: '#000000',
							showCancel:false,
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
									    url: '/pages/beginans/handpaper?data='+JSON.stringify(ress)+"&authKey="+that.authKey
									});
								}
							}
						});
					}
					uni.hideLoading()
				},(error) => {
						//console.log(JSON.stringify(error))
						that.loading = false
						that.disabled = false
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
				//提交
				console.log("提交")
			},
			doNext(e){
				console.log(e)
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_commitpascal",params: {
						authKey: that.authKey,
						solution: that.lanternPaperAnswer,
						targetId: e,
					}
				}
				that.chooseType=-1
				console.log(JSON.stringify(param))
				if(e!=0){
					uni.showLoading({title: '正在提交......'})
					request.baseRequest(opts, param).then((res) => {
						if(!util.isEmpty(res)){
							console.log(JSON.stringify(res))
							that.itemObj = res
							that.list = that.itemObj.pascal
							if(that.itemObj.pascal.lantern.status==0 && !util.isEmpty(that.itemObj.pascal)){
								//未选
								that.chooseType = 0
							}else if(that.itemObj.pascal.lantern.status==1 && !util.isEmpty(that.itemObj.pascal)){
								//已选
								that.chooseType = 1
							}
							that.lanternPaperAnswer = JSON.stringify(that.list.lantern.lanternPaperAnswer)
						}
						that.isShow = true
						uni.hideLoading()
					},(error) => {
							console.log(JSON.stringify(error))
							that.isShow = true
							that.chooseType = 0
							uni.hideLoading()
							uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
						}
					)
				}else if(e==0){
					//是否确认提交
					uni.showLoading({title: '正在提交......'})
					request.baseRequest(opts, param).then((res) => {
						if(!util.isEmpty(res)){
							console.log(JSON.stringify(res))
							that.itemObj = res
							that.list = that.itemObj.pascal
							if(that.itemObj.pascal.lantern.status==0 && !util.isEmpty(that.itemObj.pascal)){
								//未选
								that.chooseType = 0
							}else if(that.itemObj.pascal.lantern.status==1 && !util.isEmpty(that.itemObj.pascal)){
								//已选
								that.chooseType = 1
							}
							if(that.itemObj.canhand){
								that.showSureBtn = true
							}
							that.lanternPaperAnswer = JSON.stringify(that.list.lantern.lanternPaperAnswer)
						}
						that.isShow = true
						uni.hideLoading()
					},(error) => {
							console.log(JSON.stringify(error))
							that.isShow = true
							that.chooseType = 0
							uni.hideLoading()
							uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
						}
					)
				}else{
					uni.showToast({
						icon:'none',
						title:"系统异常，请稍后在试，或联系管理员"
					})
				}
			},
			doUp(e){
				console.log(e)
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let ischoose = false
				that.chooseType = -1
				// if(!util.isEmpty(that.lanternPaperAnswer)){
				// 	console.log(that.lanternPaperAnswer)
				// 	JSON.parse(this.lanternPaperAnswer).forEach((item,index)=>{
				// 		if(item.userAnswer==1){
				// 			ischoose = true
				// 		}
				// 	})
				// }
				that.lanternPaperAnswer = JSON.stringify(that.list.lantern.lanternPaperAnswer)
				// if(!ischoose){
				// 	that.lanternPaperAnswer = ''
				// }
				//that.lanternPaperAnswer = ''
				let param = {id: 2,method: "exam_commitpascal",params: {
						authKey: that.authKey,
						solution: that.lanternPaperAnswer,
						targetId: e,
					}
				}
				//console.log(JSON.stringify(param))
				if(e!=0){
					uni.showLoading({title: '返回上一题......'})
					request.baseRequest(opts, param).then((res) => {
						if(!util.isEmpty(res)){
							//console.log(JSON.stringify(res))
							that.itemObj = res
							that.list = that.itemObj.pascal
							//是否初始化有选中数据
							console.log(that.itemObj.pascal.lantern)
							if(that.itemObj.pascal.lantern.status==0 && !util.isEmpty(that.itemObj.pascal)){
								//未选
							}else if(that.itemObj.pascal.lantern.status==1 && !util.isEmpty(that.itemObj.pascal)){
								//已选
								that.chooseType = 1
							}
							that.lanternPaperAnswer = JSON.stringify(that.list.lantern.lanternPaperAnswer)
						}
						that.isShow = true
						uni.hideLoading()
					},(error) => {
							console.log(JSON.stringify(error))
							that.isShow = true
							that.chooseType = 0
							uni.hideLoading()
							uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
						}
					)
				}
			},
			isChoose(e){
				if(!this.isEmpty(e)){
					//console.log(JSON.stringify(e))
					this.lanternPaperAnswer = JSON.stringify(e)
				}
			},
			isEmpty(value){
				return util.isEmpty(value);
			},
			doSure(){
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_handpaper",params: {
						authKey: that.authKey
					}
				}
				that.loading = true
				that.disabled = true
				
				uni.showLoading({title: '正在交卷，请稍后...'})
				console.log(JSON.stringify(param))
				request.baseRequest(opts, param).then((ress) => {
					console.log(JSON.stringify(ress))
					if(!util.isEmpty(ress)){
						uni.showModal({
							title: '提示',
							content: ress.msg,
							confirmColor: '#000000',
							showCancel:false,
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
									    url: '/pages/beginans/handpaper?data='+JSON.stringify(ress)+"&authKey="+that.authKey
									});
								}
							}
						});
					}
					uni.hideLoading()
				},(error) => {
						console.log(JSON.stringify(error))
						that.loading = false
						that.disabled = false
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
				//提交
				//console.log("提交")
			},
			answerTotal(){
				// uni.navigateTo({
				// 	url:'/pages/beginans/answertotal?authKey='+this.authKey
				// })
				let url = 'https://www.dalinicegroup.com/w/apppage/exam/answertotal/?authKey='+this.authKey
				//location.href="app://openWebViewUrlPage?webUrl="+url+"&curvedDisplay=1"
				location.href = url
			},
			change(e){
				
			},
			/**
			 * 打开基础内容
			 */
			toggle(type) {
				//看是否还有漏题
				let that = this;
				let url = this.vote_url;
				let opts = {url: url,method: "POST"};
				let param = {id: 2,method: "exam_manualhandpaper",params: {
						authKey: that.authKey
					}
				}
				
				request.baseRequest(opts, param).then((ress) => {
					console.log(JSON.stringify(ress))
					if(!util.isEmpty(ress)){
						that.topics = ress.topics
						that.popupContent = that.currTime
						that.type = type
						that.$refs.popup.open()
					}
				},(error) => {
						console.log(JSON.stringify(error))
						uni.showToast({title: error.message, duration: 1500, mask: true, icon: "none"})
					}
				)
			},
			close() {
				this.$refs.popup.close()
			},
			showTotal(){
				this.$refs.popup.close()
				this.answerTotal()
			}
		}
	}
</script>

<style lang="scss">
	%uni-flex {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	%uni-flex-inline {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.content {
		@extend %uni-flex;
		min-height: 100%;
		background:url(../../static/bg.png) no-repeat;
		background-size: 100% 100%;
		justify-content: flex-start;
		
		.uni-flex-top{
			@extend %uni-flex;
			width: 100%;
			background: transparent;
			flex-direction: row;
			justify-content: space-between;
			height:90upx;
			
			.uni-flex-lefttime{
				@extend %uni-flex-inline;
				font-size: 32upx;
				height:90upx;
				padding-left:20upx;
				color:white;
				
				.countdown{
					margin-top: 6upx;
					color: black;
				}
			}
			.uni-flex-total{
				@extend %uni-flex-inline;
				font-size: 32upx;
				height:90upx;
				padding-right:20upx;
				color:white;
				.uni-flex-totbtn{
					@extend %uni-flex;
					font-size: 32upx;
					.tjIcon{
						width: 200upx;
						height: 60upx;
					}
				}
			}
		}

		.uni-flex-note {
			@extend %uni-flex;
			width: 100%;
			background: transparent;
			justify-content: center;
			align-items: flex-start;

			.uni-flex-list {
				@extend %uni-flex;
				flex: 1;
				padding: 0 20upx;
				color: white;
			}
		}
		.uni-flex-main{
			width:85%;
			background: transparent;
			margin-top: 5upx;
			border-radius: 10upx;
		}
		.bot-sure{
			@extend %uni-flex;
			width: 100%;
			flex: 1;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom) !important;
			background: white;
			.dosure{
				width: 100%;
				border-radius: 0;
			}
		}
		
		.popupTop{
			
			.popup-content{
				@extend %uni-flex;
				border-radius: 20upx;
				background: white;
				width:70%;
				padding: 40upx;
				justify-content: center;
				margin: 0 auto;
				position: relative;
				.cancel{
					color: black;
					position: absolute;
					right:24upx;
					top: 10upx;
					padding-bottom:10upx;
				}
				.popup-main{
					@extend %uni-flex;
					justify-content: center;
					.info{
						font-size: 32upx;
						font-weight: bold;
						padding: 10upx 0;
						.showTime{
							color:red;
						}
					}
					.tip{
						margin-top:20upx;
						font-size: 26upx;
						color: rgb(36, 128, 253);
					}
				}
				.showBtn{
					@extend %uni-flex;
					width:100%;
					margin-top:100upx;
					justify-content: space-between;
					flex-direction: row;
					.anwstotal{
						background: rgb(254, 202, 116);
						color: white;
						border:0;
						border-radius: 50px;
					}
					.sureit{
						background: rgb(251, 82, 89);
						color: white;
						border:0;
						border-radius: 50px;
					}
				}
			}
		}
		.uni-popup__wrapper-box{
			@extend %uni-flex;
			justify-content: center;
		}
	}
	
</style>
